<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
     <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人中心主界面</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">

</head>
<body>
<style type="text/css">
body,ul,li{
	margin:0;
	padding:0;
}

.content-ul,.people,.shen-ul{
	margin:0 auto;
	width:fit-content;
}
		.shen-ul>li{
		list-style: none;
	    display: inline-block;
	    width: 100px;
	    height: 100px;
	   	margin: 20px 15px;
	    border: solid 1px #F3F3F3;
	    cursor: pointer;
		}
		.content-ul>li{
				list-style:none;
				display:inline-block;
				width:170px;
				height:170px;
				margin:20px 15px;
				border:solid 1px #F3F3F3;
			    cursor: pointer;
		}
		.content-ul>li:hover{
				background-color:#19AA8D;
				color:white;
		}
		.photo{
			   width:90px;
			   height:100px;
			   margin:auto;
			   margin-top:20px;
		}
		.charater{
				margin:auto;
				line-height:50px;
				font-size:15px;
				font-weight:bold;
				display:block;
				width:fit-content;
				color:#19AA8D;
		}
		.content-ul>li:hover>span{
			color:white;
		}
.nav-tabs{
	height: 26px;
	margin:10px auto;
    border-bottom: 1px solid #19AA8D;
}
.nav-left{
	float: left;
    margin-bottom: -1px;
    list-style:none;
}
.nav-right{
	float: left;
	list-style:none;
	margin-left: 120px;
}
.nav-right-left{
	float: left;
	list-style:none;
	margin-left: 20px;
}
.nav-zhi{
	margin-right: 17px;
    margin-top: 5px;
    float: left;
	list-style:none;
}
.nav-left>a{
	background: #19AA8D!important;
    color: white;
    display:block;
    width: 130px;
    height: 26px;
    text-align: center;
    font-size: 13px;
    line-height: 26px;
    margin-right:2px;
    cursor:pointer;
    border-radius: 4px 4px 0 0;
}	
	.application:hover{
		border-left: 3px solid #19AA8D!important;
	}	
.application,.application1{
	width:1000px;
	height:160px;
	background:white;
	cursor: pointer;
	margin:30px auto;
	border:solid 1px #F3F3F3;
}
.application-left{
	height: 100%;
    width: 12%;
    float: left;
    
}
.application-right{
	width: 86%;
	height:100%;
    float: left;
    padding-right:20px;
}
.application-icon{
	width:80px;
	height:80px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid #e4e4e4;
}
.application-right-top{
	height:30%;
	border-bottom: 1px solid #E6E6FA;
	padding-top:20px;
}
.application-right-bottom{
	height:56%
}
.pull-left{
	float:left;
}
.pull-right{
	float:right;
}
.application-right-bottom-left{
	float:left;
	width:30%;
	height:100%;
}
.application-right-bottom-right{
	float:left;
	width:30%;
	height:100%;
}
.info-item{
	height: 25px;
    line-height: 25px;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    text-align: left;
}
.content-ul>li:hover>.icon-shenpi-white{
	background:url('static/easyui/themes/icons/shenpi2.png') no-repeat center center;
}
.icon-shenpi{
	background:url('static/easyui/themes/icons/shenpi.png') no-repeat center center;
}
.icon-apply1{
	background:url('static/easyui/themes/icons/apply1.png') no-repeat center center;
}
.content-ul>li:hover>.icon-apply2{
	background:url('static/easyui/themes/icons/apply2.png') no-repeat center center;
}
.icon-personal1{
	background:url('static/easyui/themes/icons/personal1.png') no-repeat center center;
}
.content-ul>li:hover>.icon-personal2{
	background:url('static/easyui/themes/icons/personal2.png') no-repeat center center;
}
.icon-time1{
	background:url('static/easyui/themes/icons/time1.png') no-repeat center center;
}
.content-ul>li:hover>.icon-time2{
	background:url('static/easyui/themes/icons/time2.png') no-repeat center center;
}
.icon-contact1{
	background:url('static/easyui/themes/icons/contact1.png') no-repeat center center;
}
.content-ul>li:hover>.icon-contact2{
	background:url('static/easyui/themes/icons/contact2.png') no-repeat center center;
}
.application1{
	display: none;
}
.shen{
	display: none;
}
.bohui{
	color:red;
	color: 15px;
}
.tongguoo{
	color:#19AA8D!important;
	font-size: 15px;
}
</style>
<script type="text/javascript">
$(function(){
	$("#ss-2").click(function(e){
		e.preventDefault();  // 阻止链接跳转
		var url = this.href;  // 保存点击的地址  
		var type=$("#selectlei option:selected").val();
		if(type=="全部"){
			type=0;
		}else if(type=="出差"){
			type=1;
		}else if(type=="补录"){
			type=2;
		}else if(type=="加班"){
			type=3;
		}else if(type=="请假"){
			type=4;
		}else if(type=="讲师"){
			type=5;
		}else if(type=="薪资"){
			type=6;
		}
		var kai=$("#dd-start").val();
		var jie=$("#dd-end").val();  
		console.log(kai>jie+"--"+kai<jie)
		$.ajax({
			url: "shen-sousuo", 
			type : "post",
			data: {type:type,kai:kai,jie:jie},
			success: function(msg){
		    	if(msg==1){   
		    		$('#container').remove();                          
		    		$('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container
		    	}
			}
		});
		
	});
});
	function shenqing(){
		$(".dai").hide();
		$(".shen").hide();
		$(".application1").show();
	}
	function dsp(){
		$(".application1").hide();
		$(".shen").hide();
		$(".dai").show();
	}
	function wdsq(){
		$(".application1").hide();
		$(".dai").hide();
		$(".shen").show();
	}
	function add(text){   
		$("#content-admin").panel({
			href:text
		})
	}
	function chakan(type,shen,id){
		add("people-cha?type="+type+"&&shen="+shen+"&&id="+id);
	}
</script>
 <div class="people">
 
		
		 		<ul class="content-ul">
		 			<li><div class="photo icon-apply1 icon-apply2"></div><span class="charater">申请中心</span></li>
		 			<li><div class="photo icon-shenpi icon-shenpi-white"></div><span class="charater">审批中心</span></li>
		 			<li><div class="photo icon-personal1 icon-personal2"></div><span class="charater">个人中心</span></li>
		 			<li><div class="photo icon-time1 icon-time2"></div><span class="charater">考勤假期</span></li>
		 			<li><div class="photo icon-contact1 icon-contact2"></div><span class="charater">公司通讯录</span></li>
		 		</ul>
		
		 	<div class="content-three"  data-options="fit:true">
		 			
		 				<ul class="nav-tabs">
							<li class="nav-left">
								<a onclick="dsp()">待审批事项</a>
							</li>
							<li class="nav-left">
								<a onclick="wdsq()">我的申请</a>
							</li>
							<li class="nav-left">
								<a onclick="shenqing()">发起申请</a>
							</li>
							<li class="nav-right">申请日期：<input id="dd-start" type="date"  style="width:150px"></li>
							<li class="nav-right-left"><div class="nav-zhi">至</div><input id="dd-end" type="date"  style="width:150px"></li>
							<li class="nav-right-left">
							<a id="ss-2" href="sousuo"  class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"></a>
							<select id="selectlei">
								<option>全部</option>
								<option>加班</option>
								<option>出差</option>
								<option>补录</option>
								<option>请假</option>
								<option>讲师</option>
								<option>薪资</option>
							</select></li>
						</ul>
		 			<!-- 下列代码为点击待审批事项出现的界面 -->	
			<section id="content">
				<div id="container">
				 	<div class="dai">
		 		<c:forEach items="${arr }" var="s">
			<div class="application" onclick="chakan(1,${s.lei},${s.id })">
				<div class="application-left">
					<img class="application-icon">
				</div>
				<div class="application-right">
					<div class="application-right-top">
						<div class="pull-left">
							<span style="font-weight: 400;font-size: 18px;color: #666;">申请类别：${s.type }</span>
							<span style="font-weight: 400;font-size: 13px;color: #999;margin-left: 5px;">申请时间：${s.sdate }</span>
						</div>
					<div class="pull-right">
						<button style="width: 77px; height: 22px;border-radius: 2px; font-weight: 400;font-size: 13px;color: #fff;padding-top: 3px;line-height:2px;background-color:#F9B46A;">审核</button>
					</div>
					</div>
					<div class="application-right-bottom">
						<div class="application-right-bottom-left">
							<div class="info-item">姓名：${s.name }</div>
							<div class="info-item">职位：${s.zhiwei }</div>
							<div class="info-item">理由：${s.yuan }</div>
						</div>
						<div class="application-right-bottom-right">
							<div class="info-item" style="${s.leixing==null?'display:none':'' }">类型：${s.leixing }</div>
							<div class="info-item" style="${s.kai==null?'display:none':'' }">时间：${s.kai }至${s.jie }</div>
							<div class="info-item" style="${s.bukadate==null?'display:none':'' }">补卡时间：${s.bukadate }</div>
							<div class="info-item" style="${s.shijian==null?'display:none':'' }">时长：${s.shijian}</div>
						</div>
						<div class="application-right-bottom-right">
							<div class="info-item" style="${s.duan==null?'display:none':'' }">时间段：${s.duan }</div>
						</div>
					</div>
				</div>
			</div>
			</c:forEach>
		 	</div>
		 	<!-- 下列代码为点击我的申请出现的界面 -->	
		 	<div class="shen" >
		 		<c:forEach items="${arry }" var="s">
			<div class="application" onclick="chakan(2,${s.lei},${s.id })">
				<div class="application-left">
					<img class="application-icon">
				</div>
				<div class="application-right">
					<div class="application-right-top">
						<div class="pull-left">
							<span style="font-weight: 400;font-size: 18px;color: #666;">申请类别：${s.type }</span>
							<span style="font-weight: 400;font-size: 13px;color: #999;margin-left: 5px;">申请时间：${s.sdate }</span>
						</div>
					<div class="pull-right">
						<span ${s.zhuang=="驳回"?"class='bohui'":"class='tongguoo'" }>${s.zhuang }</span>
					</div>
					</div>
					<div class="application-right-bottom">
						<div class="application-right-bottom-left">
							<div class="info-item">姓名：${s.name }</div>
							<div class="info-item">职位：${s.zhiwei }</div>
							<div class="info-item">理由：${s.yuan }</div>
						</div>
						<div class="application-right-bottom-right">
							<div class="info-item" style="${s.leixing==null?'display:none':'' }" >类型：${s.leixing }</div>
							<div class="info-item" style="${s.kai==null?'display:none':'' }">时间：${s.kai }至${s.jie }</div>
							<div class="info-item" style="${s.bukadate==null?'display:none':'' }">补卡时间：${s.bukadate }</div>
							<div class="info-item" style="${s.shijian==null?'display:none':'' }">时长：${s.shijian}</div>
						</div>
						<div class="application-right-bottom-right">
							<div class="info-item" style="${s.duan==null?'display:none':'' }">时间段：${s.duan }</div>
						</div>
					</div>
				</div>
			</div>
			</c:forEach>
		 	</div>
		</div>
		</div>
			</section>
			<!-- 下列代码为点击发起申请出现的界面 -->
			<div class="application1" >
			<ul class="shen-ul">
				<li onclick="add('kq-business-shen')">出差申请</li>
				<li onclick="add('kq-attendance-shen')">补卡申请</li>
				<li onclick="add('apply')">请假申请</li>
				<li onclick="add('kq-overtime-shen')">加班申请</li>
				<li onclick="add('train-sqteach')">讲师申请</li>
				<li onclick="add('hr-departure')">离职申请</li>
			</ul>
			</div>
	 </div>
</body>
</html> 